<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Register</title>
		<link rel="stylesheet" href="css/yjw/register.css" />
		<script src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="js/yjw/register.js" ></script>
		
	</head>
	<body>
		<!--总体-->
		<div class="all">
		
			<!--头部-->
			<div class="head">
				<img src="img/yjw/register/head-top-login.png" class="headLogo" />
				<span class="headVertical">|</span>
				<span class="headHwsc">华为商城</span>
			</div>
			
			<!--中部-->
			<div class="middleAll">
				<!--手机页-->
				<div class="middlePhone">
					<div class="middlePhoneBox">
						
						<!--手机页面头部-->
						<div class="middlePhoneBoxHead">
							<div class="middleHeadPhone">
								<img src="img/yjw/register/message_phone.png" class="middleHeadMP" /><span class="mHeadPhoneSpan"></span>
								<span class="middlePhoneFont">手机号</span>
							</div>
							<div class="middleHeadPhoneEamil">
								<img src="img/yjw/register/message_phone.png" class="middleHeadMP" /><span class="mHeadPhoneEmailSpan"></span>
								<span class="middlePhoneEmailFont">电子邮箱</span>
							</div>
							<span class="middleleft">已有华为账号&nbsp;<span class="middleLogin">登录></span></span>
						</div>
						
						<!--手机页面身体-->
						<div class="middlePhonePage" >
							<form action="#" method="post">
								<ul style="list-style-type: none;">
									<li class="middlePhoneFirstLine">
										<div class="middlePhoneFirstFont">
											<span>国&nbsp;&nbsp;家&nbsp;&nbsp;/&nbsp;&nbsp;地&nbsp;&nbsp;区</span>
										</div>
				
										<div class="all">
											<div class="line">
												<span class="china">中国</span>
												<img src="img/yjw/register/triangle_green.png" class="triangleGreen" />
											</div>
											<div class="checkHiddle">
												<ul class="country">
													<div class="zg chose">
														<li class="choseZg">中国</li>
														<hr />
													</div>
													<div class="mg chose">
														<li class="choseMg">美国</li>
														<hr />
													</div>
													<div class="els chose">
														<li class="choseEls">俄罗斯</li>
														<hr />
													</div>
													<div class="ydl chose">
														<li class="choseYdl">意大利</li>
														<hr />
													</div>
													<div class="dg chose">
														<li class="choseDg">德国</li>
														<hr />
													</div>
													<div class="xjp chose">
														<li class="choseXjp">新加坡</li>
														<hr />
													</div>
													<div class="tg chose">
														<li class="choseTg">泰国</li>
														<hr />
													</div>
													<div class="nw chose">
														<li class="choseNw">挪威</li>
														<hr />
													</div>
													<div class="rd chose">
														<li class="choseRd">瑞典</li>
														<hr />
													</div>
													<div class="fg chose">
														<li class="choseFg">法国</li>
														<hr />
													</div>
													
												</ul>
											</div>
										</div>
									
									</li>
									<li class="middlePhoneSecondLine">
										<div class="middlePhoneSeconedFont">
											<span>+86(中国)</span>
											<img src="img/yjw/register/triangle_gray.png" />
										</div>
										<input type="text" class="middlePhoneSeconedMassage" name="userTel" id="userTel" placeholder="请输入手机号" style="onClick="this.style.color='black';this.value='';" onBlur="this.style.color=''" onkeyup="value=value.replace(/[^0-9.]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^0-9.]/g,''))"/>
									</li>
									<li class="middlePhoneThirdLine">
										<div class="middlePhoneThirdFont">
											<span>图&nbsp;&nbsp;形&nbsp;&nbsp;验&nbsp;&nbsp;证&nbsp;&nbsp;码</span>
										</div>
											<!--图形验证码-->
											<input type="text" class="middlePhoneThirdMassage"  placeholder="请输入图形验证码" style="onClick="this.style.color='black';this.value='';" onBlur="this.style.color=''"/>
									</li>
									<li class="middlePhoneFourthLine">
										<div class="middlePhoneFourthFont">
											<span>短&nbsp;&nbsp;信&nbsp;&nbsp;验&nbsp;&nbsp;证&nbsp;&nbsp;码</span>
										</div>
										<input type="text" class="middlePhoneFourthMassage"  placeholder="请输入短信验证码" style="onClick="this.style.color='black';this.value='';" onBlur="this.style.color=''"/>
										<span class="phoneGetCode">获取验证码</span>
									</li>
									<li class="middlePhoneFifthLine">
										<div class="middlePhoneFifthFont">
											<span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</span>
										</div>
										<input type="password" class="middlePhoneFifthMassage" id="userPswByTel" name="userPassword" placeholder="请输入密码" style="onClick="this.style.color='black';this.value='';" onBlur="this.style.color=''"/>
									</li>
									<li class="middlePhoneSixthLine">
										<div class="middlePhoneSixthFont">
											<span>确&nbsp;&nbsp;认&nbsp;&nbsp;密&nbsp;&nbsp;码</span>
										</div>
										<input type="password" class="middlePhoneSixthMassage" id="confirmPswByTel" placeholder="请再次输入密码" style="onClick="this.style.color='black';this.value='';" onBlur="this.style.color=''"/>
									</li>
									<li class="middlePhoneSeventhLine">
										<input type="button" class="middlePhoneLogin" value="注册" onclick="registerByTel()"></input>
									</li>
								</ul>
							</form>
						</div>
					</div>
				</div>
				
				<!--邮箱页-->
				<div class="middleEmail">
					<div class="middleEmailBox">
						
						<!--邮箱页头部-->
						<div class="middleEmailBoxHead">
							<div class="middleHeadEmailPhone">
								<img src="img/yjw/register/message_phone.png" class="middleHeadMP" /><span class="mHeadEmailPhoneSpan"></span>
								<span class="middleEmailPhoneFont">手机号</span>
							</div>
							<div class="middleHeadEmail">
								<img src="img/yjw/register/message_phone.png" class="middleHeadMP" /><span class="mHeadEmailSpan"></span>
								<span class="middleEmailFont">电子邮箱</span>
							</div>
							<span class="middleleft">已有华为账号&nbsp;<span class="middleLogin">登录></span></span>
						</div>
						
						<!--邮箱页身体-->
						<div class="middleEmailPage">
							<form action="#" method="post">
								<ul style="list-style-type: none;">
									<li class="mEmailFirstLine">
										<div class="mEmailFirstFont">
											<span>国&nbsp;&nbsp;家&nbsp;&nbsp;/&nbsp;&nbsp;地&nbsp;&nbsp;区</span>
										</div>
										
										<div class="all">
											<div class="line">
												<span class="china">中国</span>
												<img src="img/yjw/register/triangle_green.png" class="triangleGreen" />
											</div>
											<div class="checkHiddle">
												<ul class="country">
													<div class="zg chose">
														<li class="choseZg">中国</li>
														<hr />
													</div>
													<div class="mg chose">
														<li class="choseMg">美国</li>
														<hr />
													</div>
													<div class="els chose">
														<li class="choseEls">俄罗斯</li>
														<hr />
													</div>
													<div class="ydl chose">
														<li class="choseYdl">意大利</li>
														<hr />
													</div>
													<div class="dg chose">
														<li class="choseDg">德国</li>
														<hr />
													</div>
													<div class="xjp chose">
														<li class="choseXjp">新加坡</li>
														<hr />
													</div>
													<div class="tg chose">
														<li class="choseTg">泰国</li>
														<hr />
													</div>
													<div class="nw chose">
														<li class="choseNw">挪威</li>
														<hr />
													</div>
													<div class="rd chose">
														<li class="choseRd">瑞典</li>
														<hr />
													</div>
													<div class="fg chose">
														<li class="choseFg">法国</li>
														<hr />
													</div>
													
												</ul>
											</div>
										</div>
										
									</li>
									<li class="mEmailSecondLine">
										<div class="mEmailSecondFont">
											<span>邮&nbsp;&nbsp;件&nbsp;&nbsp;地&nbsp;&nbsp;址</span>
										</div>
										<input id="userMail" type="text" class="mEmailSecondMassage"  placeholder="请输入邮件地址" style="onClick="this.style.color='black';this.value='';" onBlur="this.style.color=''"/>
									</li>
									<li class="mEmailThirdLine">
										<div class="mEmailThirdFont">
											<span>图&nbsp;&nbsp;形&nbsp;&nbsp;验&nbsp;&nbsp;证&nbsp;&nbsp;码</span>
										</div>
											<!--图形验证码-->
											<input type="text" class="mEmailThirdMassage"  placeholder="请输入图形验证码" style="onClick="this.style.color='black';this.value='';" onBlur="this.style.color=''"/>
									</li>
									<li class="mEmailFourthLine">
										<div class="mEmailFourthFont">
											<span>邮&nbsp;&nbsp;件&nbsp;&nbsp;验&nbsp;&nbsp;证&nbsp;&nbsp;码</span>
										</div>
										<input type="text" class="mEmailFourthMassage"  placeholder="请输入短信验证码" style="onClick="this.style.color='black';this.value='';" onBlur="this.style.color=''"/>
										<span class="emailGetCode">获取验证码</span>
									</li>
									<li class="mEmailFifthLine">
										<div class="mEmailFifthFont">
											<span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</span>
										</div>
										<input id="userPswByMail" type="password" class="mEmailFifthMassage"  placeholder="请输入密码" style="onClick="this.style.color='black';this.value='';" onBlur="this.style.color=''"/>
									</li>
									<li class="mEmailSixthLine">
										<div class="mEmailSixthFont">
											<span>确&nbsp;&nbsp;认&nbsp;&nbsp;密&nbsp;&nbsp;码</span>
										</div>
										<input id="confirmPswByMail" type="password" class="mEmailSixthMassage"  placeholder="请再次输入密码" style="onClick="this.style.color='black';this.value='';" onBlur="this.style.color=''"/>
									</li>
									<li class="mEmailSeventhLine">
										<div class="mEmailSeventhFont">
											<span>+86(中国)</span>
											<img src="img/yjw/register/triangle_gray.png" />
										</div>
										<input id="userTelByMail" type="text" class="mEmailSeventhMassage"  placeholder="请输入手机号" style="onClick="this.style.color='black';this.value='';" onBlur="this.style.color=''" onkeyup="value=value.replace(/[^0-9.]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^0-9.]/g,''))"/>
									</li>
									<li class="mEmailEighthLine">
										<div class="mEmailEighthFont">
											<span>短&nbsp;&nbsp;信&nbsp;&nbsp;验&nbsp;&nbsp;证&nbsp;&nbsp;码</span>
										</div>
										<input type="text" class="mEmailEighthMassage"  placeholder="请输入短信验证码" style="onClick="this.style.color='black';this.value='';" onBlur="this.style.color=''"/>
										<span class="EmailEighthGetCode">获取验证码</span>
									</li>
									<li class="mEmailNinthLine">
										<input type="button" class="mEmailNinthLogin" value="注册" onclick="registerByMail()"></input>
									</li>
								</ul>
							</form>
						</div>
						
						
					
					</div>
				</div>
						
			</div>	
				
			<!--尾部，与手机和邮箱页面分开的，与头，中是兄妹关系-->
			<!--手机页面尾部-->
			<div class="phoneTail">
				<hr class="pTailHr" />
				<ul style="list-style-type: none;">
					<li class="pTaileFirstLine">
						<span class="pTailOne1">华为账号用户协议</span>
						<span class="pTailShu1">|</span>
						<span class="pTailOne2">关于华为账号与隐私的说明</span>
						<span class="pTailShu2">|</span>
						<span class="pTailOne3">常见问题</span>
					</li>
					<li class="pTailSecondLine">
						<span class="pTailTwo1">Copyright&nbsp;&nbsp;011-2018&nbsp;华为软件技术有限公司&nbsp;版权所有&nbsp;保留一切权利&nbsp;苏B2-20070200号&nbsp;|&nbsp;苏ICP备09062682号-9</span>
						<span class="pTailTwo2">&#169;</span>
					</li>
				</ul>
			</div>
			
			<!--邮箱页尾部-->
			<div class="emailTail">
				<hr class="eTailHr" />
				<ul style="list-style-type: none;">
					<li class="eTaileFirstLine">
						<span class="eTailOne1">华为账号用户协议</span>
						<span class="eTailShu1">|</span>
						<span class="eTailOne2">关于华为账号与隐私的说明</span>
						<span class="eTailShu2">|</span>
						<span class="eTailOne3">常见问题</span>
					</li>
					<li class="eTailSecondLine">
						<span class="eTailTwo1">Copyright&nbsp;&nbsp;011-2018&nbsp;华为软件技术有限公司&nbsp;版权所有&nbsp;保留一切权利&nbsp;苏B2-20070200号&nbsp;|&nbsp;苏ICP备09062682号-9</span>
						<span class="eTailTwo2">&#169;</span>
					</li>
				</ul>
			</div>
		</div>
		
		<script type="text/javascript">
			//验证手机登录
			function registerByTel(){
				//取到input文本框中的用户输入的手机号和密码
				var tel = jQuery("#userTel").val();
				var psw = jQuery("#userPswByTel").val();
				var cPswByTel = jQuery("#confirmPswByTel").val();
				//校验手机号和密码的正则表达式
				var regexByTel = /^[1][3,4,5,7,8][0-9]{9}$/;
				var regexByPsw = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{4,16}$/;//密码包含字母数字和符号
				if(regexByTel.test(tel)){
					if(regexByPsw.test(psw)){
						//alert(psw+":"+cPswByTel);
						 if(psw==cPswByTel){
							$.get("Register?method=registerByTel",{userTel:tel,userPassword:psw},function(e){
								if(e=="ok"){
									window.location.href="Main";
								}else{
									alert("注册失败");
								}
							});
						}else{
							alert("您的密码输入不一致，请重新输入。")
						} 
					}else{
						alert("您输入的密码要包含数字、字母和特殊字符，请重新输入。")
					}
				}else{
					alert("请输入十一位合法手机号");
					return false;
				}
				//Register?method=register:连接到register方法，该方法在RegisterServlet中
				//{userTel:tel,userPassword:psw}:把得到的参数手机号和密码传到register方法中，userTel是register方法中的
				//function(e){}是成功了就跳转到Main页面，否则就登陆失败
			}
			
			//验证邮箱登录
			 function registerByMail(){
				var mail = jQuery("#userMail").val();
				var psw = jQuery("#userPswByMail").val();
				var cPswByMail = jQuery("#confirmPswByMail").val();
				var tel = jQuery("#userTelByMail").val();
				//校验邮箱和密码、手机号的正则表达式
				var regexByTel = /^[1][3,4,5,7,8][0-9]{9}$/;
				var regexByPsw = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{4,16}$/;//密码包含字母数字和符号
				var regexByMail = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
				if(regexByMail.test(mail)){
					if(regexByPsw.test(psw)){
						if(psw==cPswByMail){
							if(regexByTel.test(tel)){
								$.get("Register?method=registerByMail",{userMail:mail,userPswByMail:psw,userTelByMail:tel},function(e){
									if(e=="ok"){
										window.location.href="Main";
									}else{
										alert("注册失败");
									}
								});
							}else{
								alert("请输入11位合法手机号。")
							}
						}else{
							alert("两次密码输入不一致，请重新输入。")
						}
					}else{
						alert("密码输入有误，请重新输入。")
					}
				}else{
					alert("邮箱输入格式有误，请重新输入。")
				}
				
				
				
				
			}
			
			
		</script>
		
	</body>
</html>